<template>
  <video-player
    class="video-player vjs-custom-skin"
    ref="videoPlayers"
    :options="playerOptions"
    controls
    :playsinline="false"
    @ready="playerReadied"
    @pause="onPlayerPause"
    @timeupdate="onPlayerTimeupdate($event, props.showDo)"
    @play="onPlayerPlay"
    @ended="onPlayerEnded"
    @waiting="onPlayerWaiting"
    @playing="onPlayerPlaying"
    @loadeddata="onPlayerLoadeddata"
    @canplay="onPlayerCanplay"
    @canplaythrough="onPlayerCanplaythrough"
    @statechanged="playerStateChanged"
    :src="UseVedioUrlStore().VedioUrl"
  />
  <!-- {{ props.showDo }} -->
</template>
<script setup>
import { UseVedioUrlStore } from '@/stores'
import { ref } from 'vue'
const props = defineProps({
  videoUrl: { type: String },
  showDo: {
    type: Boolean
  }
})

const playerOptions = {
  // 可选的播放速度
  playbackRates: [0.5, 1.0, 1.5, 2.0],
  // 如果为true,浏览器准备好时开始回放。
  autoplay: false,
  // 默认情况下将会消除任何音频。
  muted: false,
  // 是否视频一结束就重新开始。
  loop: false,
  // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  preload: 'auto',
  // 语言设置
  language: 'zh-CN',
  // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  aspectRatio: '16:9',
  // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  fluid: false,
  volume: 0.2,
  // sources: [
  //   {
  //     // 视频格式
  //     type: 'video/mp4',
  //     // 视频地址
  //     src: UseVedioUrlStore().VedioUrl
  //   }
  // ],
  // 视频封面地址
  // poster: 'https://picsum.photos/300/200',
  // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  notSupportedMessage: '此视频暂无法播放，请稍后再试',
  controlBar: {
    //  分割线/显示隐藏
    timeDivider: false,
    //  显示总时间
    durationDisplay: true,
    //  是否显示剩余时间功能
    remainingTimeDisplay: true,
    //  是否显示全屏按钮
    fullscreenToggle: true,
    //  播放暂停按钮
    playToggle: true,
    //  音量控制
    volumeMenuButton: true,
    //  当前播放时间
    currentTimeDisplay: true,
    //  进度条显示隐藏
    progressControl: true,
    //  直播流时，显示LIVE
    liveDisplay: true,
    //  播放速率，当前只有html5模式下才支持设置播放速率   如果false右下角 1X 播放速率将会隐藏
    playbackRateMenuButton: true
  }
}
const currentTime = ref(0)

/* 获取视频播放进度 */
// 进度更新(当前播放位置发生变化时触发)(视频接收到新内容会一直调用)(高频调用)
const onPlayerTimeupdate = (player, showDo) => {
  // currentTime.value = player.cache_.currentTime
  // console.log(showDo)
  if (showDo === false) {
    player.target.firstChild.pause()
  }
  // console.log(player)
  localStorage.setItem('currentTime', player.target.firstChild.currentTime)
  currentTime.value = player.target.firstChild.currentTime
  // console.log(currentTime.value)
}
/* 设置视频开始的进度 */
// 准备就绪(预加载前会调用)(初始化调用)将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数
const playerReadied = (player) => {
  // player.currentTime(currentTime.value)
  player.target.firstChild.currentTime =
    localStorage.getItem('currentTime') || currentTime.value
}

// 暂停回调   将视频播放的时间保存
// 暂停(暂停时调用)(用户操作调用)
const onPlayerPause = (player) => {
  console.log('播放暂停!', player.target.firstChild.currentTime)

  //   存储player.currentTime 是当前暂停时间    用于下次断续播放
}
// 播放(播放时会调用)(用户操作调用)
const onPlayerPlay = (player) => {
  console.log('播放', player)
  // this.$emit('onPlayerPlay', player)
}

// 播放状态改变回调
const playerStateChanged = (playerCurrentState) => {
  console.log('数据变化', playerCurrentState)
}

// 结束(视频播放完毕调用)
const onPlayerEnded = (player) => {
  console.log('结束', player)
}
// 等待(视频中出现loading就会调用,加载时调用)(高频调用)
const onPlayerWaiting = (player) => {
  console.log('等待', player)
}
// 播放中(进入播放状态会调用)(等待onPlayerWaiting和播放onPlayerPlay执行后会调用)(高频调用)
const onPlayerPlaying = (player) => {
  console.log('播放中', player)
}
// 当播放器在当前播放位置下载数据时触发
const onPlayerLoadeddata = (player) => {
  console.log('预加载', player)
}

// 媒体的readyState为HAVE_FUTURE_DATA或更高(预加载onPlayerLoadeddata调用后会调用)(初始化调用)
const onPlayerCanplay = (player) => {
  console.log('是否播放', player)
}
// 能够从头到尾播放(是否播放onPlayerCanplay调用后会调用)(初始化调用)这意味着可以在不缓冲的情况下播放整个媒体文件
const onPlayerCanplaythrough = (player) => {
  console.log('能够从头到尾播放', player)
}
</script>
<style scoped>
.video-player {
  cursor: pointer;
}
.video-js {
  background: rgb(0, 0, 0, 0.5);
}
</style>
